<template>
	<div class="collect">
		<myheader :type_title="type_title" :title="title"></myheader>
		<div class="nav">
			<p class="interval">|</p>
			<span @click="tabs(index)" v-bind:class="{'active':act==index}" v-for="(tab,index) in tabarr">{{tab}}</span>
		</div>
		<div class="info">
			<!--楼盘-->
			<div class="info-LP" v-show="str[0]">
				<div class="noLP">
					<span><img src="../../../static/image/no_data.png" /></span>
					<p>您还没有收藏任何楼盘哦~</p>
				</div>
				<div class="youLP">
					<ul>
						<li v-for = "(item,index) in houseData">
							<div class="LPimg"><img :src="item.take_img" /></div>
							<div class="LPinfo">
								<h3 id="LPinfo-title">{{item.take_house}}</h3>
								<p id="LPinfo-money"><i></i><span>{{item.take_money}}</span></p>
								<p id="LPinfo-add"><i></i><span>{{item.take_size}}</span></p>
								<p id="LPinfo-size"><i></i><span>{{item.take_address}}</span></p>
								<button @click="btncss(index)" class="btn" type="button"></button>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<!--房源-->
			<div class="info-FY" v-show="str[1]">
				<div class="noFY">
					<span><img src="../../../static/image/no_data.png" /></span>
					<p>您还没有收藏任何房源哦~</p>
				</div>
				<div class="youFY">
					<ul>
						<li>
							<div class="FYimg"><img src="../../../build/logo.png" /></div>
							<div class="FYinfo">
								<h3 id="FYinfo-title">中福控股大厦</h3>
								<p id="FYinfo-money"><i></i><span>4.5元/m².天</span></p>
								<p id="FYinfo-add"><i></i><span>通州-果园</span></p>
								<p id="FYinfo-size"><i></i><span>508m²</span></p>
								<button @click="FYbtn" class="btn" type="button"></button>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import myheader from '@/components/user/myheader'
	export default {
		name: "collect",
		data() {
			return {
				title: "我的收藏",
				type_title: "noright",
				tabarr: ["楼盘", "房源"],
				act: 0,
				str: [true, false],
				houseData:"",
				flag:true
			}
		},
		methods: {
			tabs(index) {
				this.act = index;
				for(var i = 0; i < 2; i++) {
					this.str[i] = false
				}
				this.str[index] = true
			},
			//喜欢不喜欢
			btncss(index){
				this.flag = !this.flag
				if(this.flag == false){
					$(".btn").eq(index).removeClass("actives");
				}else if(this.flag == true){
					$(".btn").eq(index).addClass("actives");					
				}
			},
			FYbtn(){
				this.flag = !this.flag
				if(this.flag == false){
					$(".btn").removeClass("actives");
				}else if(this.flag == true){
					$(".btn").addClass("actives");					
				}
			}
		},
		components: {
			myheader
		},
		mounted() {
			var userId = localStorage.getItem("userId");
			//查询用户收藏的总数
			var _this = this;
			_this.axios.get(_this.ajaxUrls + '/api/User/takecount?id=' + userId).then(function(res) {
				if(res.data == 0) {
					$(".noLP").show();
					$(".noFY").show();
					$(".youLP").hide();
					$(".youFY").hide();
				} else {
					//查询用户收藏的信息
					_this.axios.get(_this.ajaxUrls + '/api/User/takeselect?id=' + userId).then(function(res) {
						console.log(res)
						$(".noLP").hide();
						$(".noFY").hide();
						$(".youLP").show();
						$(".youFY").show();
						_this.houseData = res.data;
					}).catch(function(err) {
						console.log(err);
					})
				}
			}).catch(function(err) {
				console.log(err)
			})
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
	.collect {
		width: 100%;
		height: auto;
		background: #F1F1F1;
	}
	
	.nav {
		width: 100%;
		height: 0.8rem;
		margin-top: 0.05rem;
		background: white;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.nav .interval {
		display: block;
		position: absolute;
		left: 50%;
	}
	
	.nav span {
		width: 50%;
		height: 100%;
		display: inline-block;
		text-align: center;
		line-height: 0.8rem;
		color: #666666;
		font-size: 0.3rem;
	}
	
	.nav .active {
		border-bottom: 4px solid #F3B240;
		box-sizing: border-box;
	}
	
	.info {
		width: 100%;
		height: auto;
		margin-top: 0.05rem;
		background: white;
	}
	
	.info-LP {
		width: 100%;
		height: auto;
	}
	
	.noLP {
		width: 100%;
		height: 4.5rem;
	}
	
	.noLP span {
		display: inline-block;
		width: 100%;
		height: 2.8rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.noLP img {
		width: 1.35rem;
		height: 1.15rem;
	}
	
	.noLP p {
		width: 100%;
		text-align: center;
		color: #999999;
		font-size: 0.3rem;
	}
	
	.youLP {
		width: 100%;
		height: auto;
		margin: 0.3rem;
		box-sizing: border-box;
	}
	
	.youLP ul {
		width: 100%;
		height: auto;
		display: flex;
		flex-wrap: wrap;
		align-content: center;
	}
	
	.youLP li {
		width: 100%;
		height: 2.4rem;
		padding: 0.3rem 0;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.LPimg {
		width: 2.2rem;
		height: 100%;
	}
	
	.LPimg img {
		display: inline-block;
		width: 2.2rem !important;
	}
	
	.LPinfo {
		width: 4rem;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		padding-left: 0.15rem;
		box-sizing: border-box;
		position: relative;
	}
	
	#LPinfo-title {
		width: 100%;
		height: auto;
		color: #333333;
	}
	
	.LPinfo p {
		width: 100%;
		height: 0.5rem;
		font-size: 0.3rem;
		color: #666666;
	}
	
	.LPinfo span {
		padding-left: 0.1rem;
	}
	
	.LPinfo i {
		display: inline-block;
		width: 18px;
		height: 18px;
		background: url(../../../static/image/icon_user.png) no-repeat;
	}
	
	#LPinfo-money i {
		background-position: -398px -14px;
	}
	
	#LPinfo-add i {
		background-position: -167px -14px;
	}
	
	#LPinfo-size i {
		background-position: -188px -14px;
	}
	
	.btn {
		width: 50px;
		height: 50px;
		position: absolute;
		bottom: 0rem;
		right: -0.3rem;
		background: url(../../../static/image/icon_user.png) no-repeat;
		/*background-position: -284px -189px;*/
		background-position: -214px -189px;
		border: none;
		outline: none;
	}
	
	.actives{
		width: 50px;
		height: 50px;
		position: absolute;
		bottom: 0rem;
		right: -0.3rem;
		background: url(../../../static/image/icon_user.png) no-repeat;
		background-position: -284px -189px;
		border: none;
		outline: none;
	}
	
	.info-FY {
		width: 100%;
		height: auto;
	}
	
	.noFY {
		width: 100%;
		height: 4.5rem;
	}
	
	.noFY span {
		display: inline-block;
		width: 100%;
		height: 2.8rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.noFY img {
		width: 1.35rem;
		height: 1.15rem;
	}
	
	.noFY p {
		width: 100%;
		text-align: center;
		color: #999999;
		font-size: 0.3rem;
	}
	
	.youFY {
		width: 100%;
		height: auto;
		padding: 0.3rem;
		box-sizing: border-box;
	}
	.youFY ul {
		width: 100%;
		height: auto;
		display: flex;
		flex-wrap: wrap;
		align-content: center;
	}
	
	.youFY li {
		width: 100%;
		height: 2.4rem;
		padding: 0.3rem 0;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.FYimg {
		width: 2.2rem;
		height: 100%;
	}
	
	.FYimg img {
		display: inline-block;
		width: 2.2rem !important;
	}
	
	.FYinfo {
		width: 4rem;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		padding-left: 0.15rem;
		box-sizing: border-box;
		position: relative;
	}
	
	#FYinfo-title {
		width: 100%;
		height: auto;
		color: #333333;
	}
	
	.FYinfo p {
		width: 100%;
		height: 0.5rem;
		font-size: 0.3rem;
		color: #666666;
	}
	
	.FYinfo span {
		padding-left: 0.1rem;
	}
	
	.FYinfo i {
		display: inline-block;
		width: 18px;
		height: 18px;
		background: url(../../../static/image/icon_user.png) no-repeat;
	}
	
	#FYinfo-money i {
		background-position: -398px -14px;
	}
	
	#FYinfo-add i {
		background-position: -167px -14px;
	}
	
	#FYinfo-size i {
		background-position: -188px -14px;
	}
</style>